<template>
  <div class="index-container">
    <el-form ref="formRef" label-width="80px" :model="form" :rules="rules">
      <el-row>
        <el-col :span="24">
          <el-form-item label="来源" prop="sourcefrom">
            <el-radio-group v-model="radioValue">
              <el-radio
                v-for="(item, index) in sourcefromArr"
                :key="index"
                :label="item.value"
              >
                {{ item.label }}
              </el-radio>
              <!-- <el-radio :label="1">小红书</el-radio>
              <el-radio :label="2">抖音</el-radio>
              <el-radio :label="3">陌陌</el-radio>
              <el-radio :label="4">微信群</el-radio>
              <el-radio :label="5">本地群</el-radio>
              <el-radio :label="6">朋友推荐</el-radio>
              <el-radio :label="7">QQ</el-radio>
              <el-radio :label="8">百度</el-radio>
              <el-radio :label="9">微博</el-radio>
              <el-radio :label="10">其他</el-radio> -->
            </el-radio-group>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="称呼" prop="username">
            <el-input v-model="form.username" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="手机" prop="mobile">
            <el-input v-model="form.mobile" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="微信" prop="weixin">
            <el-input v-model="form.weixin" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="性别" prop="gander">
            <el-radio-group v-model="form.gander">
              <el-radio :label="1">男</el-radio>
              <el-radio :label="2">女</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="姓名" prop="parentId">
            <el-input v-model="form.parentId" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="生日" prop="parentId">
            <el-input v-model="form.parentId" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="身高" prop="parentId">
            <el-input v-model="form.parentId" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="体重" prop="parentId">
            <el-input v-model="form.parentId" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="婚况" prop="parentId">
            <el-input v-model="form.parentId" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="学历" prop="parentId">
            <el-input v-model="form.parentId" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="职业" prop="parentId">
            <el-input v-model="form.parentId" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="收入" prop="parentId">
            <el-input v-model="form.parentId" />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="民族" prop="parentId">
            <el-input v-model="form.parentId" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="现居地" prop="parentId">
            <el-input v-model="form.parentId" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="户籍地" prop="parentId">
            <el-input v-model="form.parentId" />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="购房" prop="parentId">
            <el-input v-model="form.parentId" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="购车" prop="parentId">
            <el-input v-model="form.parentId" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="月花费" prop="parentId">
            <el-input v-model="form.parentId" />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="吸烟" prop="parentId">
            <el-input v-model="form.parentId" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="喝酒" prop="parentId">
            <el-input v-model="form.parentId" />
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="备注" prop="parentId">
            <el-input v-model="form.parentId" type="textarea" :rows="4" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <div class="pay-button-group">
            <el-button type="primary" @click="submitForm('formRef')">
              保存
            </el-button>
            <el-button @click="resetForm('formRef')">重置</el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
  export default defineComponent({
    name: 'BaseData',
    setup() {
      const state = reactive({
        formRef: null,
        form: {},
        radioValue: '',
        sourcefromArr: [],
      })

      const showInfo = (row) => {
        const params = localStorage.getItem('params')
        const jsonParams = JSON.parse(params)
        state.sourcefromArr = Object.values(jsonParams.sourcefrom)
        console.log(state.sourcefromArr)
        state.radioValue = row.sourcefrom
        state.form = JSON.parse(JSON.stringify(row))

        console.log(state.form)
      }

      // onMounted(() => {
      //   const params = localStorage.getItem('params')
      //   const jsonParams = JSON.parse(params)
      //   state.sourcefromArr = Object.values(jsonParams.sourcefrom)
      //   state.radioValue = state.form.sourcefrom
      // })
      return {
        ...toRefs(state),
        showInfo,
      }
    },
  })
</script>
<style lang="scss" scoped>
  .pay-button-group {
    display: block;
    margin: 20px auto;
    text-align: center;
  }
</style>
